<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-25 17:59:53
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-02-25 15:15:22
 * @Description:完成
-->
<template>
  <el-form
    ref="form"
    label-position="right"
    label-width="128px"
    size="mini"
    :disabled="disabled"
    :model="formData"
    :rules="rules"
  >
    <el-form-item key="faultType" label="故障分类" prop="faultType">
      <fault-type-select
        v-model="formData.faultType"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item key="faultRemark" label="故障描述" prop="faultRemark">
      <el-input
        v-model="formData.faultRemark"
        type="textarea"
        :rows="2"
      />
    </el-form-item>

    <el-form-item label="实际工时" prop="realTime">
      <el-input
        v-model="formData.realTime"
        class="halfW"
        @input="onInputRealTime"
      />
      <span class="unit">小时</span>
    </el-form-item>
    <el-form-item label="解决方法" prop="makeWay">
      <el-input
        v-model="formData.makeWay"
        type="textarea"
        :rows="4"
      />
    </el-form-item>
    <el-form-item label="附件">
      <el-col :span="22">
        <upload v-model="formData.processEnclosure" />
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
import TicketApi from '@/feat/ticket/api';
import {
  limitNumberAfterPoint,
} from '@/utils/validator';
export default {
  name: 'Complete',
  components: {
    FaultTypeSelect: () => import('@/views/reportFault/sharedComponents/select/faultTypeSelect.vue'),
    Upload: () => import('@/components/upload'),
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    faultInfo: {
      type: Object,
      default: () => ({}),
    },
    defaultData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {
        // 故障分类
        faultType: this.faultInfo.faultType || null,
        // 故障描述
        faultRemark: this.faultInfo.faultRemark || null,
        // 实际工时
        realTime: null,
        // 解决方法
        makeWay: null,
        // 附件
        processEnclosure: null,
      },
      rules: {
        faultType: [
          { required: true, message: '请选择故障分类', trigger: 'change', }
        ],
        faultRemark: [
          { required: true, message: '请输入故障描述', trigger: 'blur', }
        ],
        realTime: [
          {
            type: 'string', required: true, trigger: 'blur', validator: limitNumberAfterPoint('请输入实际耗时', 1),
          }
        ],
      },
    };
  },
  created() {
    this.formData = Object.assign({}, this.formData, this.defaultData);
  },
  methods: {
    async onSubmit(orderNum) {
      await this.$refs.form.validate();
      await TicketApi.complete({
        orderNum,
        ...this.formData,
      });
    },
    onInputRealTime(value) {
      this.formData.realTime = value.replace(/[^0-9.]/g, '');
    },
  },
};
</script>

<style lang="scss" scoped>
.halfW {
  width: 160px;
}
.w100 {
  width: 100%;
}
</style>
